<template>
	<view class="login">
		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体表单 -->
			<view class="main">
				<wInput v-model="username" type="text" placeholder="用户名"></wInput>
				<wInput v-model="password" type="password" placeholder="密码"></wInput>
			</view>
			<wButton bgColor="#01906c" class="wbutton" text="登 录" :rotate="isRotate" @click="startLogin"></wButton>

			<!-- 其他登录 -->
			<view class="other_login cuIcon">
				<view class="login_icon">
					<view class="cuIcon-weixin" @tap="login_weixin"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-weibo" @tap="login_weibo"></view>
				</view>
				<view class="login_icon">
					<view class="cuIcon-github" @tap="login_github"></view>
				</view>
			</view>

			<!-- 底部信息 -->
			<view class="footer">
				<navigator url="forget" open-type="navigate">找回密码</navigator>
				<text>|</text>
				<navigator url="register" open-type="navigate">注册账号</navigator>
			</view>
		</view>
	</view>
</template>

<script>
let _this;
import wInput from '../../components/watch-login/watch-input.vue' //input
import wButton from '../../components/watch-login/watch-button.vue' //button

export default {
	data() {
		return {
			//logo图片 base64
			logoImage: '',
			username: '', //用户
			password: '', //密码
			isRotate: false, //是否加载旋转
		};
	},
	components: {
		wInput,
		wButton,
	},
	mounted() {
		_this = this;
		this.isLogin();
	},
	methods: {
		isLogin() {
			try {
				const usertoken = uni.getStorageSync('usertoken');
				if (usertoken != "") {
					uni.reLaunch({
						url: '/pages/index/index',
					});
				}
			} catch (e) {
				console.log("未登录用户");
			}
		},
		startLogin(e) {
			//登录
			if (this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false;
			}
			this.isRotate = true;
			if (this.username.length == "") {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '用户名不能为空'
				});
				this.isRotate = false;
				return;
			}
			if (this.password.length < 6) {
				uni.showToast({
					icon: 'none',
					position: 'bottom',
					title: '密码不正确'
				});
				this.isRotate = false;
				return;
			}
			this.loading = true;
			this.$api.login({
				username: this.username,
				password: this.password
			}).then((res) => {
				this.loading = false;
				setTimeout(function () {
					_this.isRotate = false
				}, 1000)
				if (res.code == 1) {
					uni.setStorageSync('userid', res.data.id);
					uni.setStorageSync('username', res.data.username);
					uni.setStorageSync('usertoken', res.data.usertoken);
					uni.reLaunch({
						url: '/pages/index/index',
					});
					uni.showToast({
						icon: 'success',
						position: 'bottom',
						title: '登录成功'
					});
				}
				uni.hideLoading();
			}).catch((err) => {
				this.loading = false;
				uni.showToast({
					icon: 'error',
					position: 'bottom',
					title: "系统错误，请稍后再试"
				});
				uni.hideLoading();
			})
		},
		login_weixin() {
			//微信登录
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '微信登录'
			});
		},
		login_weibo() {
			//微博登录
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: '微博登录'
			});
		},
		login_github() {
			//github登录
			uni.showToast({
				icon: 'none',
				position: 'bottom',
				title: 'github'
			});
		}
	}
}
</script>

<style>
@import url("../../components/watch-login/css/icon.css");
@import url("./css/main.css");
</style>